<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<style type="text/css">
	body,html{
		width:100%;
		height:100%;
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
		flex:1;
		text-align:center;
		
		overflow:hidden;
		text-overflow: ellipsis;
		
	}
	.li1{
		background:#ff0;
	}
	.li2{
		background:#ccc;
	}
	.li3{
		background:#00f;
	}

	</style>
</head>
<body>
	<ul style="display:flex;flex-direction:row;">
		<li class="li1">111111backgroundbackgroundbackgroundbackgroundbackgroundbackground11</li>
		<li class="li2">2</li>
		<li class="li3">3</li>
	</ul>
	<div id="app">
		<div>
			<h2>自定义下拉框</h2>
			<custom-select :list="list1"></custom-select><br>
		</div>
	</div>

<script type="text/javascript">
//注册组件
Vue.component("custom-select",{     //全局注册   //组件是独立的，不受外界影响.父组件
	data:function(){
	  return {
		 selectShow:false,
		 val:""
		  };
	},
	props:['list'],
	template:`<section>
         <div>
           <div>
            <input type="text" class="keyword" :value="val" @click="selectShow=!selectShow" />
           </div>
           <custom-list
            v-show="selectShow"
            :list="list"
            @receive="changeValueHandle"
            ></custom-list>
          </div>
      </section>`,
	methods:{
		changeValueHandle:function(value){
			this.val = value;
			this.selectShow = !this.selectShow;
		}
	}
   })
Vue.component("custom-list",{    //把其放入js文件，然后通过script标签引入，别的文件即可使用到该组件
   props:["list"],
   template:`<ul>
	  <li v-for="item in list" @click="selectValueHandle(item)">{{item}}</li>
	 </ul>`,
   methods:{
	 selectValueHandle:function(item){
		 //在子组件中有交互。当点击时告知父级，改变val的值，需要触发一个自定义事件
		this.$emit("receive",item);
	   }
   }
})
new Vue({
   el:"#app",
   data:{
	 list1:["上海","北京","杭州"]
	  }
  });
  
</script>


</body>
</html>